<template>
  <div class="relative w-full h-full overflow-y-auto">
    <PageHeader :title="$t('sellerManage.detail.商户详情')">
      <template #right>
        <el-button type="primary" @click="goBack">
          <SvgIcon name="iconfanhui" color="#fff" class="mr4"></SvgIcon
          >{{ $t('sellerManage.detail.返回上级页面') }}</el-button
        >
      </template>
    </PageHeader>
    <div class="mt24">
      <div class="custom-table" style="width: 100%">
        <div class="titleRow">{{ $t('sellerManage.detail.店铺信息') }}</div>
        <div class="flex">
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.店铺名称') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo["name" + locale] }}
            </div>
          </div>
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.入驻类型') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.settleType === 1 ? $t('sellerManage.detail.个人入驻') : $t('sellerManage.detail.企业入驻') }}
            </div>
          </div>
        </div>
        <div class="titleRow">{{ $t('sellerManage.detail.经营分类') }}</div>
        <el-table
          :data="tenantInfo.skuClassifys"
          style="width: 100%"
          border
          class="cover-table"
        >
          <el-table-column
            :prop="`skuClassifyParentName${locale}`"
            :label="$t('sellerManage.detail.一级分类')"
          />
          <el-table-column
            :prop="`skuClassifyName${locale}`"
            :label="$t('sellerManage.detail.二级分类')"
          />
        </el-table>
        <div class="titleRow">{{ $t('sellerManage.detail.店铺联系人信息') }}</div>
        <template v-if="tenantInfo.settleType === 1">
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.所在地') }}</div>
              <div class="custom-table-value">
                {{ tenantInfo.settleLocation }}
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.详细地址') }}
              </div>
              <div class="custom-table-value">
                {{ tenantInfo.settleAddress }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.联系人') }}</div>
              <div class="custom-table-value">
                {{ tenantInfo.settleContact }}
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.联系手机号') }}
              </div>
              <div class="custom-table-value">
                {{ tenantInfo.settlePhone }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.身份证正面') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleIdImage1"
                  :previewSrcList="[tenantInfo.settleIdImage1]"
                />
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.身份证反面') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleIdImage2"
                  :previewSrcList="[tenantInfo.settleIdImage2]"
                />
              </div>
            </div>
          </div>
        </template>
        <template v-if="tenantInfo.settleType === 2">
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.公司名称') }}
              </div>
              <div class="custom-table-value">
                {{ tenantInfo.settleCompanyName }}
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.所在地') }}</div>
              <div class="custom-table-value">
                {{ tenantInfo.settleLocation }}
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.详细地址') }}
              </div>
              <div class="custom-table-value">
                {{ tenantInfo.settleAddress }}
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.联系人') }}</div>
              <div class="custom-table-value">
                {{ tenantInfo.settleContact }}
              </div>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('sellerManage.detail.联系手机号') }}
            </div>
            <div class="custom-table-value">{{ tenantInfo.settlePhone }}</div>
          </div>
          <div class="titleRow">{{ $t('sellerManage.detail.营业执照信息') }}</div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.营业执照') }}</div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleLicenseImage"
                :previewSrcList="[tenantInfo.settleLicenseImage]"
              />
            </div>
          </div>
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.法人身份证正面') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleIdImage1"
                  :previewSrcList="[tenantInfo.settleIdImage1]"
                />
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.法人身份证反面') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleIdImage2"
                  :previewSrcList="[tenantInfo.settleIdImage2]"
                />
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.补充认证一') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleExtra1"
                  :previewSrcList="[tenantInfo.settleExtra1]"
                />
              </div>
            </div>
            <div class="custom-table-row flex1">
              <div class="custom-table-label" style="width: 200px">
                {{ $t('sellerManage.detail.补充认证二') }}
              </div>
              <div class="custom-table-value">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="tenantInfo.settleExtra2"
                  :previewSrcList="[tenantInfo.settleExtra2]"
                />
              </div>
            </div>
          </div>
          <div class="custom-table-row">
            <div class="custom-table-label" style="width: 200px">
              {{ $t('sellerManage.detail.补充认证三') }}
            </div>
            <div class="custom-table-value">
              <el-image
                style="width: 100px; height: 100px"
                :src="tenantInfo.settleExtra3"
                :previewSrcList="[tenantInfo.settleExtra3]"
              />
            </div>
          </div>
        </template>

        <div class="titleRow">{{ $t('sellerManage.detail.佣金及支付凭证') }}</div>
        <!-- <div class="titleRow">佣金比例及收款信息</div> -->
        <div class="flex">
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.佣金比例') }}</div>
            <div class="custom-table-value">
              {{ tenantInfo.commissionRate ?? "--" }}%
              <!-- <div class="flex_aic">
            <el-input-number
                v-model="tenantInfo.commissionRate"
                :min="0"
                :max="100"
                :step="1"
            />
            <span class="ml8">%</span>
            <el-button class="ml20" type="primary" @click="handleSave"
                >保存</el-button
            >
            </div> -->
            </div>
          </div>
          <!-- <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">
              收款人姓名
            </div>
            <div class="custom-table-value">
              {{ configData.accountBankAccountName ?? "--" }}
            </div>
          </div> -->
        </div>
        <!-- <div class="flex">
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">
              收款账户号码
            </div>
            <div class="custom-table-value">
              {{ configData.accountBankAccountNo ?? "--" }}
            </div>
          </div>
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">
              收款银行名称
            </div>
            <div class="custom-table-value">
              {{ configData.accountBankName ?? "--" }}
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">
              收款银行地址
            </div>
            <div class="custom-table-value">
              {{ configData.accountBankAddress ?? "--" }}
            </div>
          </div>
          <div class="custom-table-row flex1">
            <div class="custom-table-label" style="width: 200px">
              SWIFT CODE
            </div>
            <div class="custom-table-value">
              {{ configData.accountBankCode ?? "--" }}
            </div>
          </div>
        </div> -->
        <div class="custom-table-row">
          <div class="custom-table-label" style="width: 200px">{{ $t('sellerManage.detail.支付凭证') }}</div>
          <div class="custom-table-value">
            <el-image
              style="width: 100px; height: 100px"
              :src="tenantInfo.payImage"
              :previewSrcList="[tenantInfo.payImage]"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Api from "@/config/api/api";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const { locale, t } = useI18n();
const route = useRoute();
const router = useRouter();
const tenantInfo = ref({});
const configData = ref({});

// 经营类目

const getTenantInfo = async () => {
  try {
    const res = await Api.tenantInfo(route.query.id);
    tenantInfo.value = res.data || {};
    //console.log(tenantInfo.value);
  } catch (error) {
    console.log(error);
  }
};

const getPlatformConfig = () => {
  Api.getConfig().then((res) => {
    if (res?.status == 200) {
      configData.value = res?.data || {};
    }
  });
};

const handleSave = () => {
  console.log(tenantInfo.value);
  Api.updateCommissionRate({
    id: tenantInfo.value.id,
    commissionRate: tenantInfo.value.commissionRate,
  }).then((res) => {
    if (res?.status == 200) {
      ElMessage.success(t("sellerManage.detail.保存成功"));
    }
  });
};

const goBack = () => {
  router.back();
};

onMounted(() => {
  getTenantInfo();
  getPlatformConfig();
});
</script>

<style lang="scss" scoped>
.reasonBox {
  width: 650px;
  height: 100px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  color: #333;
}

.titleRow {
  height: 36px;
  line-height: 36px;
  background: rgba(255, 120, 45, 0.05);
  border-radius: 3px;
  padding-left: 10px;
  margin-top: 12px;
  font-weight: 500;
  color: #333;
}
</style>
